<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>{{ title }}</h3>
      <p>{{ count }}</p>
      <button v-on:click="count++">btn</button>
    </div>

    <script src="../../Vue.js"></script>
    <script>
      // 放在data的东西是有响应式的
      // timer没有出现在html中,就没有必要放在data里面,放在data里面反而会影响性能
      let timer;

      new Vue({
        // el: "#app",
        data: {
          title: "生命周期",
          count: 0,
          // timer: null,
        },
        methods: {
          fn() {},
        },
        // template相当于outerHTML
        // template: `
        //   <div>123</div>
        // `,
        // 只有创建阶段和挂载阶段的生命周期实惠自动执行
        // 生命周期执行顺序和书写顺序无关

        // vue自己去初始化了事件和生命周期

        // 创建阶段
        beforeCreate() {
          // 不能去做数据请求，不能拿到data，不能去做赋值
          console.log("beforeCreate", this.title, this.fn);
        },

        // vue自己去初始化了注入和响应式(data和methods)

        created() {
          console.log("created", this.title, this.fn);
        },

        // vue会去检查是否有el选项和template选项

        // 挂载阶段
        beforeMount() {
          console.log("beforeMount", document.querySelector("#app"));
        },

        // vue会去将真实dom去代换虚拟dom

        mounted() {
          console.log("mounted", document.querySelector("#app"));
          // 模拟数据请求
          // setTimeout(() => {
          //   this.count = 10;
          // }, 500);

          timer = setInterval(() => {
            console.log(1);
          }, 1000);

          // 手动销毁组件
          // vue里面销毁组件是销毁的响应式
          setTimeout(() => {
            this.$destroy();
          }, 4000);
        },

        // 更新阶段
        // 更新阶段会在data的数据发生改变的时候触发
        // 更新前和更新后不是数据改变的前后, 是dom重新渲染的前后
        // 数据的改变和页面的渲染不是一起发生的
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.count,
            document.querySelector("p").innerHTML
          );
          // this.count++;
        },
        // 在update里面不要去修改数据，如果修改数据会造成死循环
        updated() {
          console.log(
            "updated",
            this.count,
            document.querySelector("p").innerHTML
          );
          // this.count++;
        },

        // 销毁阶段
        // 组件销毁的时候会触发
        // 组件销毁的时候，组件的定时器是不会被销毁的
        beforeDestroy() {
          // 清除定时器/WebScoket/js的事件监听/第三方插件的监听
          console.log("beforeDestroy");
          clearInterval(timer);
        },
        // 几乎不用
        destroyed() {
          console.log("destroyed");
        },
      }).$mount("#app");
    </script>
  </body>
</html>
